<template>
  <div>
    <el-form label-width="80px" :model="userInfo" ref="form" :rules="rules">
      <el-alert title="注意：修改登录名和密码后需要重新登录" type="warning" style="margin:10px 0px"></el-alert>
      <el-row>
        <el-col :sm="8">
          <el-form-item label="姓名" prop="username">
            <el-input v-model="userInfo.username"></el-input>
          </el-form-item>
        </el-col>
        <el-col :sm="8">
          <el-form-item label="登录账号" prop="loginname">
            <el-input v-model="userInfo.loginname"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :sm="8">
          <el-form-item label="电子邮箱" prop="email">
            <el-input v-model="userInfo.email"></el-input>
          </el-form-item>
        </el-col>
        <el-col :sm="8">
          <el-form-item label="手机号" prop="mobile">
            <el-input v-model="userInfo.mobile"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :sm="8">
          <el-form-item label="职务" prop="zw">
            <el-input v-model="userInfo.zw"></el-input>
          </el-form-item>
        </el-col>
        <el-col :sm="8">
          <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="userInfo.sex">
              <el-radio :label="0">男</el-radio>
              <el-radio :label="1">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :sm="8">
          <el-form-item label="密码" prop="pwd">
            <el-input v-model="userInfo.pwd" type="password"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="6" style="text-align:center">
          <el-button type="primary" @click="editSelf">保存</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { checkMobile, editSelf, checkName } from "@/api/admin";
import { removeToken } from "@/utils/auth";
export default {
  data() {
    return {
      userInfo: {},
      showEdit: false, //是否显示编辑界面
      rules: {
        username: [{ required: true, message: "请输入", trigger: "blur" }],
        mobile: [
          { trigger: "blur", validator: this.checkMobile, required: true }
        ],
        loginname: [
          { trigger: "blur", validator: this.checkName, required: true }
        ]
      }
    };
  },
  created() {
    this.userInfo = JSON.parse(JSON.stringify(this.$store.getters.userInfo));
  },
  methods: {
    removeToken() {
      removeToken();
      setTimeout(() => {
        this.$router.push({ name: "login" });
      }, 0);
    },
    async editSelf() {
      this.$refs["form"].validate(async valid => {
        if (valid) {
          let r = await editSelf(this.userInfo);
          if (r && r.error == 0) {
            try {
              //更新个人信息后重新获取个人信息，如果修改了密码登录名等信息，那么token会失效，需要重新登录
              await this.$store.dispatch("user/getInfo", {
                userid: this.userInfo.userid
              });
              this.$message({
                message: "个人信息修改成功",
                type: "success"
              });
            } catch (error) {
              await this.$store.dispatch("user/logout");
              setTimeout(() => {
                this.$router.push({ name: "login" });
              }, 0);
            }
          } else {
            this.$message({
              message: "修改失败",
              type: "error"
            });
          }
        } else {
          return false;
        }
      });
    },
    async checkName(rule, value, callback) {
      if (!value || !value.trim() || value.length == 0) {
        callback(new Error("请输入登录账户"));
        return;
      }
      let r = await checkName({
        name: this.userInfo.loginname + "@@" + this.userInfo.userid
      });
      if (r) {
        callback();
      } else {
        callback(new Error("登录名重复"));
      }
    },

    async checkMobile(rule, value, callback) {
      if (!value || !value.trim() || value.length == 0) {
        callback(new Error("请输入手机号"));
        return;
      }
      let r = await checkMobile({
        mobile: this.userInfo.mobile + "@@" + this.userInfo.userid
      });
      if (r) {
        callback();
      } else {
        callback(new Error("手机号重复"));
      }
    }
  }
};
</script>